<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Coordinates and parameters
        const ox = canvas.width / 2 - 20;
        const oy = canvas.height / 2 + 30;
        const axisLength = 250;
        const arrowHeadSize = 8;
        const theta0 = Math.PI / 9; // Approx 20 degrees

        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Draw Axes
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1.5;
        // x-axis
        ctx.beginPath();
        ctx.moveTo(ox - axisLength, oy);
        ctx.lineTo(ox + axisLength, oy);
        ctx.stroke();
        // y-axis
        ctx.beginPath();
        ctx.moveTo(ox, oy + axisLength * 0.7);
        ctx.lineTo(ox, oy - axisLength * 0.7);
        ctx.stroke();
        ctx.restore();

        // Axis Arrowheads
        drawArrow(ctx, ox + axisLength - 10, oy, ox + axisLength, oy, arrowHeadSize);
        drawArrow(ctx, ox, oy - axisLength * 0.7 + 10, ox, oy - axisLength * 0.7, arrowHeadSize);
        
        // Axis Labels
        ctx.font = 'italic 20px serif';
        ctx.fillText('x', ox + axisLength + 15, oy);
        ctx.fillText('y', ox, oy - axisLength * 0.7 - 15);
        ctx.font = '20px serif';
        ctx.fillText('O', ox - 15, oy + 15);


        // Particle m1
        const m1_x = ox - 200;
        const m1_y = oy;
        ctx.beginPath();
        ctx.arc(m1_x, m1_y, 4, 0, 2 * Math.PI);
        ctx.fill();

        // m1 label
        ctx.font = 'italic 22px serif';
        ctx.fillText('m', m1_x - 28, m1_y - 5);
        ctx.font = '16px serif';
        ctx.fillText('1', m1_x - 18, m1_y + 2);

        // m1 velocity vector
        drawArrow(ctx, ox - 150, oy, ox - 60, oy, arrowHeadSize);
        ctx.font = 'italic bold 22px serif';
        ctx.fillText('u', ox - 105, oy - 20);

        // Particle m2
        const m2_dist = 220;
        const m2_x = ox + m2_dist * Math.cos(theta0);
        const m2_y = oy - m2_dist * Math.sin(theta0); // Canvas y is inverted
        ctx.beginPath();
        ctx.arc(m2_x, m2_y, 4, 0, 2 * Math.PI);
        ctx.fill();

        // m2 label
        ctx.font = 'italic 22px serif';
        ctx.fillText('m', m2_x + 15, m2_y - 5);
        ctx.font = '16px serif';
        ctx.fillText('2', m2_x + 25, m2_y + 2);

        // m2 velocity vector
        const v2_start_dist = 160;
        const v2_end_dist = 70;
        drawArrow(ctx, ox + v2_start_dist * Math.cos(theta0), oy - v2_start_dist * Math.sin(theta0),
                       ox + v2_end_dist * Math.cos(theta0), oy - v2_end_dist * Math.sin(theta0), arrowHeadSize);

        // m2 velocity label 'u'
        const u2_label_dist = 125;
        ctx.font = 'italic bold 22px serif';
        ctx.fillText('u', ox + u2_label_dist * Math.cos(theta0) - 20, oy - u2_label_dist * Math.sin(theta0) - 15);

        // Angle theta0
        // Dashed line from origin
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1.5;
        const dashed_line_len = 180;
        ctx.beginPath();
        ctx.moveTo(ox, oy);
        ctx.lineTo(ox + dashed_line_len * Math.cos(theta0), oy - dashed_line_len * Math.sin(theta0));
        ctx.stroke();
        ctx.restore();

        // Angle Arc
        ctx.lineWidth = 1;
        const arc_radius = 50;
        ctx.beginPath();
        ctx.arc(ox, oy, arc_radius, 0, -theta0, false); // false for clockwise in inverted-y canvas
        ctx.stroke();
        
        // Angle marker (L-shape)
        const d_marker = 35; // distance from origin along x-axis
        const h_marker = 8; // height of the horizontal line of L
        const x_corner = ox + d_marker;
        const y_corner = oy - h_marker;
        const x_on_line = ox + h_marker / Math.tan(theta0);
        ctx.beginPath();
        ctx.moveTo(x_corner, oy);
        ctx.lineTo(x_corner, y_corner);
        ctx.lineTo(x_on_line, y_corner);
        ctx.stroke();

        // Angle Label
        const label_arc_dist = 75;
        const label_x = ox + label_arc_dist * Math.cos(theta0 / 2);
        const label_y = oy - label_arc_dist * Math.sin(theta0 / 2);
        ctx.font = 'italic 22px serif';
        ctx.fillText('θ', label_x - 2, label_y + 5);
        ctx.font = '16px serif';
        ctx.fillText('0', label_x + 8, label_y + 10);
        
        // Figure Caption
        ctx.font = 'bold 20px serif';
        ctx.fillText('Fig. 1.100.', canvas.width / 2, canvas.height - 25);

    </script>
</body>
</html>